.turn {
    cursor: pointer;
    display: flex;
    input[type="checkbox"] {
        position: absolute;
        opacity: 0;
    }
    label {
        display: flex;
        &:before,
        &:after {
            cursor: pointer;
            flex: 1;
            line-height: 46px;
            padding: 0 12px;
            text-align: center;
            color: #fff;
            transition: all 0.2s ease;
        }
        &:before {
            content: "启用";
        }
        &:after {
            box-shadow: 0 0 3px #f00 inset;
            content: "禁用";
            background: #f75;
        }
    }
    label:before,
    input[type="checkbox"]:checked + label:after {
        background: #f6f7fb;
        box-shadow: 0 0 3px #bbb inset;
        color: #bbb;
    }
    input[type="checkbox"]:checked + label:before {
        color: #fff;
        box-shadow: 0 0 3px #060 inset;
        background: #519703;
    }
}
.disabled .turn {
    opacity: 0.5;
}
